<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<c:set var="ctx" value="${pageContext.request.contextPath}"/>



<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>绑定会员卡</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<link href="${ctx}/static/css/font-awesome.min.css" rel="stylesheet">
<link href="${ctx}/static/css/swiper.min.css" rel="stylesheet">
<link href="${ctx}/static/css/common.css" rel="stylesheet">
<script  src="${ctx}/static/js/jquery.js" type="text/javascript"></script>
</head>
<body style="padding-bottom:1rem; background-color:#f3f3f3;">
<header class="header">
    <span class="colfff font16 span">绑定会员卡</span>
</header>
<div class="pad15">
    <div class="loginWap">
    <br>
    <br>
    	<ul>
    		<!-- 
        	<li>
        		<i class="dlIco dlIco1"></i>
        		
        		<input type="text" id="membername" name="membername" placeholder="请输入您的姓名" /><p class="colRed top5"></p>
        		
        	</li>
        	 -->
        	<li>
        	
        		<i class="dlIco dlIco2"></i>
        		<input type="tel" id="mobilePhone" name="mobilePhone" placeholder="请输入您办理会员卡时填写的手机号" value="${mobilePhone}"/>
        	</li>
        	<li class="clearfix">
        		<input type="button" class="btnYzm btns btns-nom btns-ye btns-yzm" value="发送手机验证码" /><input type="tel" id="valiCode" name="valiCode" value="123456" placeholder="请输入验证码" class="inputYzm" />
        	</li>
        </ul>
    </div>
    <c:forEach items="${cardList}" var="card" varStatus="status">
		<c:if test="${card.cardId == 'pEnm8vn_UWAZx7Z_ZMLsULkpZFHs'}">
			<a href="javascript:addCard('${card.cardId}');" class="btns btns-biggest btns-ye top40">绑  定</a>
		</c:if>
	</c:forEach>
	
</div>
</body>
<script>

(function($){
	$.fn.countDown = function(o){
	  var defs = {
		beforeText:"文本1",
		afterText:"文本2",
		wait:5,
		wait2:5
	  };
	  var obj = this;
	  var opt = $.fn.extend({},defs,o);
	  var beforeText = opt.beforeText;
	  var afterText = opt.afterText;
	  var wait = opt.wait;
	  var wait2 = opt.wait2;
	  time($(this))
	  function time(e){
		if (wait == 0) {
			e.removeAttr("disabled");            
			e.val(beforeText);  
			wait = wait2;
			e.removeClass("btns-grey")
		} else {  
			e.addClass("btns-grey")
			e.attr("disabled", true);  
			e.val(afterText+"(" + wait + ")");  
			wait--;  
			setTimeout(function() {  
				time(e)  
			},  
			1000)
		};
	  }
	}
})(jQuery);


//发送验证码
$(".btns-yzm").click(function(){
	
	var mobilePhone=$("#mobilePhone").val();
	//验证手机号
	if(validatemobile(mobilePhone)){
		var serverUrl = "${ctx}/valiCode/sendnValiCode/"+mobilePhone;
		console.log("serverUrl:"+serverUrl);
		$.ajax({ url: serverUrl, 
				 type: "GET",
				 //dataType: "json",
				 sync: true,
				 cache: false,//解决三星手机，缓存后不提交请求
				 success: function(data){
				 	if(data=='true'){
				 		console.log("data:"+data);
				 		$(".btns-yzm").countDown({
				 			beforeText : "重新发送",
				 			afterText : "重新发送",
				 			wait : 60,
				 			wait2 : 60
				 		});
				 	}else{
				 		alert("验证码发送失败，请重试！");
				 	}
		  	  	 },
		  	  	 error: function(XMLHttpRequest, textStatus, errorThrown){
		           console.log(XMLHttpRequest.responseText);
	      		 }
		});
	}else{
		alert('请输入有效的手机号码！');
	}
	
})

function validatemobile(mobile)
    {
        if(mobile.length==0)
        {
           alert('请输入手机号码！');
           return false;
        }    
        if(mobile.length!=11)
        {
            alert('请输入有效的手机号码！');
            return false;
        }
        
        var myreg = /^(((1[0-9]{1}[0-9]{1}))+\d{8})$/;
        if(!myreg.test(mobile))
        {
            alert('请输入有效的手机号码！');
            return false;
        }
        
        return true;
    }
    
function validateVCode(vcode)
{
    if(vcode.length==0)
    {
       alert('请输入验证码！');
       return false;
    }    
    if(vcode.length!=6)
    {
        alert('请输入有效验证码！');
        return false;
    }
    return true;
}
</script>

<!-- 对接微信 JS Api -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	
	/*
	* 微信JsApi接入
	*/
	console.log(location.href.split('#')[0]);
	var thisPageUrl = location.href.split('#')[0];
	//alert(thisPageUrl);
	$.ajax({ url: "${ctx}/jsapi/ajax/sign",
		 type: "POST",
		 data:{url:""+thisPageUrl},
		 dataType: "json",
		 //sync: true,
		 cache: false,//解决三星手机，缓存后不提交请求
		 success: function(data){
			console.log(data);
			if(data.success){
				//alert(data.appId);
				configWeiXin(data.appId,data.timestamp,data.nonceStr,data.signature);
			}else{
				console.log("配置weixin jsapi失败");
			}
			
		 },
	  	 error: function(XMLHttpRequest, textStatus, errorThrown){
	      	console.log(XMLHttpRequest.responseText);
		 }
	});



  /*
   * 注意：
   * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
   * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
   * 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
   *
   * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
   * 邮箱地址：weixin-open@qq.com
   * 邮件主题：【微信JS-SDK反馈】具体问题
   * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
   */
	function configWeiXin(appId, timestamp, nonceStr, signature){
	   wx.config({
	      debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
	      appId: appId,
	      timestamp: timestamp,
	      nonceStr: nonceStr,
	      signature: signature,
	      jsApiList: [
	        'checkJsApi',
	        'addCard',
	        'chooseCard',
	        'openCard'
	      ]
	  });
   }

});

var hasError = false;
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
wx.error(function (res) {
	hasError = true;
	console.log(res);
	//alert(res);
});

// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
wx.ready(function(){
});

function mark(){
	$("body").append('<div id="bdModal" style="width:100%; height:100%; background:rgba(0,0,0,0.4); text-align:center; position:fixed; top:0; left:0;"><i class="fa fa-spinner" style="font-size:3rem; color:#fff; position:absolute; top:48%;"></i></div>')	
}

function removeMark(){
	$("#bdModal").remove();	
}

function addCard(cardId){
	
	if(hasError){
		alert("微信JS接口安全域名配置错误！");
	}else{
		var mobilePhone = $("#mobilePhone").val();
		var valiCode = $("#valiCode").val();
		
		if(validatemobile(mobilePhone) && validateVCode(valiCode)){
			
			mark();//防止重复提交
			
			$.ajax({ url: "${ctx}/card/ajax/cardsign/" + cardId + "/" + mobilePhone + "/" + valiCode, 
				 type: "POST",
				 dataType: "json",
				 //sync: true,
				 cache: false,//解决三星手机，缓存后不提交请求
				 success: function(data){
					 
					 if(data.success){
						wx.addCard({
					      cardList: data.cardList,
					      success: function (res) {
					        //alert('恭喜您已成功绑定会员卡！');
					        removeMark();
					      }
					    });
					}else{
						removeMark();
						alert(data.errmsg);
					}
					
				 },
			  	 error: function(XMLHttpRequest, textStatus, errorThrown){
			  		removeMark();
			  		alert(XMLHttpRequest.responseText);
				 }
			});
		}
	}
	
}
</script>
</html>
